import React, { useMemo } from 'react';
import { Radio, Space } from 'antd';
import { INodeComponent } from './type';

export const NodeRadio: React.FC<INodeComponent> = (props) => {
  const data = useMemo(() => {
    return props?.data;
  }, [props?.data]);

  const onRadioChange = (e: any) => {
    let value = e.target.value;
    if (value && props.onChange) {
      props.onChange(value);
    }
  };

  return (
    <Radio.Group onChange={onRadioChange} value={props?.value ?? ''}>
      <Space direction="vertical">
        {data?.radioList && data?.radioList?.length > 0
          ? data?.radioList?.map((item: any) => {
              return (
                <Radio key={item.value} value={item.value}>
                  {item.label}
                </Radio>
              );
            })
          : null}
      </Space>
    </Radio.Group>
  );
};
